<template>
	<view class="header">
		<view class="header-inner ">
			<view class="header-logo flex-center alic">
				<image src="/static/images/login/logo.png" :mode="isMobile?'heightFix':'widthFix'" class="header-logo-img" @click="goHome"/>
			</view>
			<view class="header-center flex-between-nowrap" v-if="loginInfo.user_id">
				<view class="header-menu flex-start-nowrap alic">
					
					<view @click="goMenu(item,index)" :class="['cup posr',index == getHeaderTabIndex ?'active':'']"
					 v-for="(item,index) in tabList.list" :key="index" v-if="item.hasOwnProperty('team')?getCreateTeam:true">
						{{item.name}}
						<u-badge v-if="getUserUnReadMsg.my_income && item.dot" :class="['dot']" :isDot="true" :customStyle="{right:'-5px'}"></u-badge>
					</view>
					<!-- <view class="active posr">
						我的收入
						
					</view>
					<view class="">
						我的团队
					</view> -->
					<view class="header-right-info">
						<view  v-if="show" class="header-right-search">
							<view class="header-right-search-inner">
								<input v-model="search_text" type="text" class="header-search" placeholder-class="header-search-input"
									placeholder="搜索项目名称或者项目ID"
									@confirm="searchProject">
							</view>
							<image src="@/static/images/index/search-icon.png" mode="widthFix" class="search-icon-img" @click="searchProject"/>
						</view>
					</view>
				</view>
				<view class="header-right-info">
					<!-- <view  v-if="show" class="header-right-search">
						<view class="header-right-search-inner">
							<input v-model="search_text" type="text" class="header-search" placeholder-class="header-search-input"
								placeholder="搜索项目名称或者编号"
								@confirm="searchProject">
						</view>
						<image src="@/static/images/index/search-icon.png" mode="widthFix" class="search-icon-img" @click="searchProject"/>
					</view> -->
					<view class="header-right-setting posr" @click="goMessage">
						<view class="posr">
							<image :src="isMobile?'/static/images/index/mbld.png':'/static/images/index/ld.png'" 
							 :style="{'margin-top':'5px','margin-right':!isMobile?'10px':'15px'}"
							mode="widthFix" class="setting-icon-img setting-icon-img-pc" />
							<u-badge v-if="getMsgRead" :class="['dot']" :isDot="true" :customStyle="{right:'3px'}"></u-badge>
						</view>
						<!-- <image src="@/static/images/index/setting-icon-app.png" mode="widthFix" class="setting-icon-img setting-icon-img-app" /> -->
						<text class="setting-txt" style="font-size: 16px;">消息</text>
					
					</view>
					<view class="header-right-name" @click="showSelect">
						<view  class="name-icon" style="background: none;">
							<image :src="loginInfo.avatar || '/static/images/login/avatar.png'" mode="aspectFill" class="avator-icon-img" />
						</view>
						<!-- <view v-else class="name-icon">
							<text>{{ nameFirst }}</text>
						</view> -->
						<view class="name-val" style="margin-left: 10px;">{{loginInfo.nick_name}}</view>
						<image src="@/static/images/index/arrow-icon.png" mode="widthFix" class="arrow-icon-img" />
						<view v-if="showSignOut" class="header-right-sign-out" >
							<view class="select-arrow-top"></view>
							<view class="select-item" @click="goSetting">
								设置
							</view>
							<view class="select-item" @click="signOut">
								退出
							</view>
						</view>
					</view>
					<view v-if="showSignOut" class="filter-select" @click="showSelect">
					</view>
				</view>
			</view>
			
			
		</view>
	</view>
</template>

<script>
	import { getUserInfo } from "@/common/api/user.js"
	import { redirectLogin } from "@/common/request.js"
	export default {
		props: {
			avatar: {
				type: String,
				default: ''
			},
			show:{
				type: Boolean,
				default: false
			}
		},
		data() {
			return {
				nameFirst: '',
				showSignOut: false,
				search_text: '',
				tabList:{
					index:0,
					list:[
						{
							name:'项目',
							url:'pages/index/index',
						},
						{
							name:'我的收入',
							url:'pages/income/index',
							dot:true,
						},
						{
							name:'我的团队',
							url:'pages/team/index',
							team:true,
						}
					]
				},
				msg_read:false,
			}
		},
		watch:{
			loginInfo(val){
				this.nameFirst = this.loginInfo.nick_name.substr(0, 1)
			}
		},
		activated() {
			this.setTabIndex();
		},
		mounted() {
			
			let that = this;
			uni.addInterceptor('navigateTo', { //监听跳转
				success(e) {
					that.setTabIndex();
					
				}
			})
			uni.addInterceptor('navigateBack', { //监听返回
				success(e) {
					that.setTabIndex();
				
				}
			})
			
			if(this.loginInfo.user_id){
				this.setUnredMsg()
			}else{
				if(window.location.href.includes('article/article')){
				}else{
					redirectLogin({code:401})
				}
			}
			this.getLoginInfo()
			this.setTabIndex()
			this.getMsg()
			this.isCreateTeam()
			this.isTeamLeader()
		},
		methods: {
			setTabIndex(){
				let index = this.tabList.list.findIndex(item => {
					return  window.location.href.indexOf(item.url)>-1
				})
				this.$store.commit('setHeaderTabIndex',index<0?-1:index)
				
			},
			goMenu(item,index){
				if(index == 0){
					this.goHome()
					this.$nextTick(()=>{
						this.setTabIndex()
					})
					return 
				}
				if(window.location.href.indexOf(item.url)> -1 ){
					return
				}
				this.$store.commit('setHeaderTabIndex',index)
				this.$nextTick(()=> {
					this.utils.goPath('/' + item.url)
				})
				
			},
			getUserInfoFun(){
				// getUserInfo().then(res => {
				// 	if (res.code === 200) {
				// 		let LoginInfo = res.data
				// 		this.loginInfo.avatar = res.data.avatar
				// 		this.$store.dispatch('set_userinfo' , res.data)
				// 		LoginInfo = JSON.stringify(LoginInfo)
				// 		uni.setStorageSync('LoginInfo', LoginInfo)
				// 		this.$forceUpdate()
				// 	}
				// })
				
				this.$store.dispatch('set_userinfo').then(res => {
					this.nameFirst = this.loginInfo.nick_name.substr(0, 1)
				}).catch(e => {
				})
			},
			getLoginInfo(){
				// 获取用户信息
				// uni.getStorage({
				// 	key: 'LoginInfo',
				// 	success: (res) => {
				// 		this.loginInfo = JSON.parse(res.data)
				// 		this.nameFirst = this.loginInfo.real_name.substr(0, 1)
				// 	}
				// });
			},
			goHome() {
				let pages = getCurrentPages()
				if(pages[pages.length - 1].route == 'pages/index/index'){
					return
				}
				let index = -1
				pages.some((item,i) => {
					if(item.route == 'pages/index/index' ){
						index = i
						return true;
					}
				})
				if(index == -1){
					uni.navigateTo({
						url: '/pages/index/index'
					})
				}else{
					uni.navigateBack({
						delta: pages.length - 1 - index 
						// pages.length - i 
					})
				}
			},
			goMessage(){
				uni.navigateTo({
					url: '/pages/message/index/index'
				})
			},
			goSetting() {
				uni.navigateTo({
					url: '/pages/setting/setting'
				})
			},
			// 下拉框
			showSelect(){
				this.showSignOut = !this.showSignOut
			},
			// 退出
			signOut(){
				uni.removeStorageSync('Authorization');
				uni.removeStorageSync('LoginInfo');
				uni.removeStorageSync('projectDetail');
				uni.redirectTo({
					url: '/pages/login/login'
				})
			},
			// 查询项目
			searchProject(){
				this.$emit('searchProject', this.search_text)
			}
		}
	}
</script>

<style lang="scss" scoped>
	// 头部内容
	.header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		width: 100%;
		height: 68px;
		background: #FFFFFF;
		box-shadow: 0px 3px 12px 0px rgba(36, 45, 74, 0.08);
		position: sticky;
		top: 0;
		left: 0;
		z-index: 1000;
		// padding: 0 132px;
		box-sizing: border-box;
		.header-inner{
			width: $baseWidth;
			margin: 0 auto;
			display: flex;
			justify-content: flex-start;
			align-items: center;
		}
		.header-logo {
			.header-logo-img {
				width: 158px;
				height: 38px;
				cursor: pointer;
			}
		}
		.header-center{
			width: calc(100% - 158px);
			.header-menu{
				font-size: 16px;
				width: 65%;
				view:hover,.active{
					@extend .c26;
					font-weight: bold;
				}
				view{
					margin-right: 5%;
				}
			}
		}
		.header-right-info {
			display: flex;
			align-items: center;

			.header-right-search {
				margin-right: 25px;
				position: relative;
				width: 240px;
				
				.search-icon-img {
					position: absolute !important;
					width: 20px;
					height: 20px;
					right: 12px;
					top: 8px;
					cursor: pointer;
				}
				

				.header-search {
					width: 240px;
					height: 36px;
					background: #F0F2F5;
					border-radius: 4px;
					padding: 8px 12px;
					box-sizing: border-box;
				}

				.header-search-input {
					font-size: 14px;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					color: #979EAA;
				}
				.header-search{
					color:#333 !important;
					font-weight: normal  !important;
					
				}
				uni-input:hover{
					opacity: 1;
					
				}
				/deep/.uni-input-wrapper{
					opacity: 1;
					color:#333;
				}
				.uni-input-input{
					font-weight: normal;
				}
				/deep/.uni-input-input:hover{
					font-weight: normal;
					color: #333;
				}
				/deep/.uni-input-input::placeholder{
					color: #979EAA;
				}
			}

			.header-right-setting {
				display: flex;
				align-items: center;
				font-size: 14px;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #32353A;
				cursor: pointer;
				// margin-right: 20px;

				.setting-icon-img {
					width: 14px;
					margin-right: 6px;
					display: block;
				}
				.setting-icon-img-app{
					display: none;
				}
				.setting-icon-img-pc{
					display: inline-block;
				}

			}
			.filter-select{
				position: fixed;
				top: 0;
				left: 0;
				width: 100%;
				height: 100%;
				background-color: transparent;
				z-index: 99998;
			}
			.header-right-name {
				display: flex;
				align-items: center;
				margin-left: 31px;
				position: relative;
				cursor: pointer;
				.name-icon {
					width: 28px;
					height: 28px;
					background: #6198F1;
					border-radius: 50%;
					display: flex;
					align-items: center;
					justify-content: center;
					font-size: 14px;
					font-family: PingFangSC-Medium, PingFang SC;
					font-weight: 500;
					color: #FFFFFF;
					// margin-right: 5px;
					overflow: hidden;
					.avator-icon-img{
						width: 28px;
						height: 28px;
						// border-radius: 50%;
					}
				}

				.name-val {
					margin-right: 6px;
					max-width: 160px;
					overflow: hidden;
					text-overflow: ellipsis;
				}

				.arrow-icon-img {
					width: 6px;
					height: 4px;
					margin-right: 5px;
				}
				&:hover {
					.header-right-sign-out{
						display: block;
					}
				}
				.header-right-sign-out{
					// display: none;
					cursor: pointer;
					.select-item{
						cursor: pointer;
						padding: 10px 0;
					}
					.select-item:active{
						// opacity: 0.8;
					}
					.select-arrow-top{
						border-left: 5px solid transparent;
						border-top: 5px solid transparent;
						border-right: 5px solid transparent;
						border-bottom: 5px solid #FFFFFF;
						position: absolute;
						top: -10px;
						left: 35px;
					}
					position: absolute;
					width: 80px;
					top: 35px;
					right: 0;
					z-index: 99999;
					padding:10px;
					box-sizing: border-box;
					font-size: 12px;
					background: #FFFFFF;
					box-shadow: 0 0 10px #ccc;
					border-radius: 5px;
					text-align: center;
				}
			}

		}
	}

	@media screen and (min-width: 0px) and (max-width:1024px) {
		.header {
			padding: 0 20px;
			height: 44px;
			box-shadow: none;
			border-bottom: 1px solid #f2f2f2;

			.header-logo {
				.header-logo-img {
					// width: 94px;
					height: 22px;
				}
			}
			.header-center{
				width: calc(100% - 94px);
				.header-menu{
					font-size: 14px;
					width: 100%;
					view{
						margin-right: 5%;
					}
					view:last-child{
						margin-right: 0;
					}
				}
			}
			.header-right-info {
				.header-right-search {
					position: initial !important;
					width: auto;
					margin-right: 13px;
					display: flex;
					align-items: center;
					display: none;
					.header-right-search-inner {
						display: none;
					}
					.search-icon-img {
						position: inherit !important;
					}
					
				}

				.header-right-setting {
					.setting-txt {
						display: none;
						width: 35px;
					}
					.setting-icon-img-app{
						display: inline-block !important;
					}
					// .setting-icon-img-pc{
					// 	display: none !important;
					// }
				}

				.header-right-name {
					margin-left: 0px;

					.name-icon {
						width: 25px;
						height: 25px;
						font-size: 10px;
						.avator-icon-img{
							// height: 30px;
							height: 25px;
						}
					}

					.name-val {
						display: none;
					}

					.arrow-icon-img {
						display: none;
					}
					.header-right-sign-out{
						.select-arrow-top{
							left: 60px;
						}
					}	
				}
			}
		}
	}
</style>
